<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-select v-model="status" placeholder="使用状态" style="width:150px;" @change="handleFilter">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="wayType" placeholder="按优惠方式" style="width:150px;" @change="handleFilter">
            <el-option
              v-for="item in wayTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="cycle"
            :picker-options="picker"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="|"
            start-placeholder="使用时间起始"
            end-placeholder="使用时间结束"
            style="width:350px;"
            @change="handleFilter"
          />
          <el-input v-model="code" style="width:200px;" placeholder="优惠码"/>
          <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <el-table
      :data="checkData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      border
      style="width:100%"
    >
      <el-table-column prop="id" label="编号" min-width="10" align="center"/>
      <el-table-column prop="code" label="优惠码" min-width="10" align="center"/>
      <el-table-column prop="targetType" label="类型" min-width="10" align="center"/>
      <el-table-column prop="status" label="状态" min-width="10" align="center"/>
      <el-table-column prop="userId" label="使用者" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="orderId" label="订单信息" min-width="10" align="center"/>
      <el-table-column prop="content" label="优惠内容" min-width="10" align="center"/>
      <el-table-column prop="originalPrice" label="原价" min-width="10" align="center"/>
      <el-table-column prop="actualPayment" label="实付" min-width="10" align="center"/>
      <el-table-column prop="batchName" label="批次名称" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleBatchDialog(scope)">{{ scope.row.batchName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="receiveTimeStr" label="领取时间" min-width="10" align="center"/>
      <el-table-column prop="orderTimeStr" label="使用时间" min-width="10" align="center"/>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <user-dialog
      :visiabledialog="userdialog"
      :dialog-data="dialogData"
      @changeVisiable="userdialog = false"
    />
    <batch-dialog
      :visiabledialog="batchdialog"
      :dialog-data="batchData"
      @Visiable="batchdialog = false"
    />
  </div>
</template>

<script>
import BatchDialog from './batchdialog'
import UserDialog from '@/components/Dialog'
import Pagination from '@/components/Pagination' // 分页组件
import { getCouponList, getCouponListByBatchId } from '@/api/operate/promcode' // 数据接口
import { getUserDetail } from '@/api/operate/userDetail' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Pagination,
    UserDialog,
    BatchDialog
  },
  data() {
    return {
      userdialog: false,
      dialogData: {},
      batchdialog: false,
      batchData: {
        tableData: []
      },
      code: '',
      cycle: [],
      wayType: '',
      status: '',
      total: 0,
      currentpage: 1,
      pagesize: 10,
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      statusList: [
        {
          value: '',
          lable: '使用状态'
        },
        {
          value: 'used',
          lable: '已使用'
        },
        {
          value: 'expired',
          lable: '已过期'
        },
        {
          value: 'unused',
          lable: '未使用'
        },
        {
          value: 'receive',
          lable: '已领取'
        }
      ],
      wayTypes: [
        {
          value: '',
          label: '按优惠方式'
        },
        {
          value: 'discount',
          label: '打折'
        },
        {
          value: 'minus',
          label: '抵价'
        }
      ],
      checkData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleBatchDialog(scope) {
      getCouponListByBatchId(scope.row.batchId).then(res => {
        res.data.items.map(item => {
          if (item.receiveTime) item.receiveTimeStr = new Date(item.receiveTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
          if (item.orderTime) item.orderTimeStr = new Date(item.orderTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
          if (item.status === 'receive') item.status = '未领取'
          if (item.status === 'expired') item.status = '已过期'
          if (item.status === 'used') item.status = '已使用'
          if (item.status === 'using') item.status = '使用中'
          if (item.status === 'unused') item.status = '未使用'
        })
        this.batchData.tableData = res.data.items
      })
      this.batchdialog = true
    },
    handleClickDialog(scope) {
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      })
      this.userdialog = true
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    },
    handleFilter() {
      this.getData()
    },
    clearParams() {
      this.status = ''
      this.wayType = ''
      this.cycle = ''
      this.code = ''
      this.getData()
    },
    getData() {
      const params = {}
      params.page = this.currentpage
      params.pageSize = this.pagesize
      params.tenantId = getTenantId()
      params.status = this.status
      params.wayType = this.wayType
      params.code = this.code
      if (this.cycle) {
        params.startDate = this.cycle[0]
        params.endDate = this.cycle[1]
      }
      getCouponList(params).then(response => {
        this.checkData = response.data.items
        this.checkData.map((item) => {
          if (item.status === 'receive') item.status = '未领取'
          if (item.status === 'expired') item.status = '已过期'
          if (item.status === 'used') item.status = '已使用'
          if (item.status === 'using') item.status = '使用中'
          if (item.status === 'unused') item.status = '未使用'
          let unit = ''
          if (item.type === 'minus') {
            item.wayType = '抵价'
            unit = '元'
          } else {
            item.wayType = '打折'
            unit = '折'
          }
          item.content = `${item.wayType}${item.rate}${unit}`
          if (item.receiveTime) item.receiveTimeStr = new Date(item.receiveTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
          if (item.orderTime) item.orderTimeStr = new Date(item.orderTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
        })
        this.total = response.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allsearch {
  margin-top: 0;
  padding: 0;
  .search-content {
    width: 100%;
    margin-bottom:21px;
  }
}
</style>
